<template>
    <div class="base-home">
        <Amap :showSearch="false" class="container-map"  @complete="complete"></Amap>

        <!-- <cover></cover> -->
        <div class="land-list">
            <div class="land-item">
                <div class="land-c" style="background: #EB5B5B;"></div>
                <div class="land-name">耕地</div>
            </div>
            <div class="land-item">
                <div class="land-c" style="background: #9ace7f;"></div>
                <div class="land-name">草地</div>
            </div>
            <div class="land-item">
                <div class="land-c" style="background: #31ad69;"></div>
                <div class="land-name">林地</div>
            </div>
            <div class="land-item">
                <div class="land-c" style="background: #4a90e2;"></div>
                <div class="land-name">综合用地</div>
            </div>
            <div class="land-item">
                <div class="land-c" style="background: #f5a623;"></div>
                <div class="land-name">仓储用地</div>
            </div>
            <div class="land-item">
                <div class="land-c" style="background: #66e5b1;"></div>
                <div class="land-name">住宅用地</div>
            </div>
            <div class="land-item">
                <div class="land-c" style="background: #9013fe;"></div>
                <div class="land-name">其他用地</div>
            </div>
            <div class="land-item">
                <div class="land-c" style="background: #4d595d;"> </div>
                <div class="land-name">未利用地</div>
            </div>
        </div>

    </div>
</template>
<script setup lang="ts">
import overview from './overview.vue';
import zzfb from './zzfb.vue';
import Amap from '@/components/Amap.vue';
import cover from '@/components/cover.vue';
interface PolygonOpt {
    map: AMap.Map,
    /**点集合 */
    path: AMap.LngLat[] | AMap.LngLat[][] | AMap.LngLat[][][] | undefined,
    /**线颜色 */
    strokeColor: string,
    /**线透明度 */
    strokeOpacity: number,
    /**线宽 */
    strokeWeight: number,
    /**填充色 */
    fillColor: string,
    /** 填充透明度*/
    fillOpacity: number,
    /** 层级*/
    zIndex: number,
    /**自定义数据 */
    extData?: any
}

const landList = [
    {
        name: '1号耕地', center: [121.695334, 31.068558],
        color: '#FA5151',
        path: [
            [121.694558, 31.068646], [121.695921, 31.069038], [121.696024, 31.068319], [121.694714, 31.068158]
        ]
    },
    {
        name: '2号耕地', center: [121.693205, 31.068419], color: '#FA5151',
        path: [
           [121.691938, 31.068562], [121.694396, 31.068959], [121.694585, 31.068185], [121.692074, 31.067925], 
        ]
    },
    {
        name: '草地', center: [121.698257, 31.06892], color: '#1791fc',
        path: [
            [121.696945, 31.069271], [121.699934, 31.069375] , [121.70001, 31.06866] , [121.696998, 31.0684]
        ]
    },
]



const complete = (map: AMap.Map) => {
    map.on('click', (e: AMap.Event) => {
        console.log(e.lnglat)
      console.log(`[${e.lnglat.lng}, ${e.lnglat.lat}]`)
        map.clearInfoWindow();
    })

    let newmarker = new AMap.Marker({
            position: [121.696364, 31.068521],
            anchor: 'bottom-center',
            map: map
        });
       
        let text = new AMap.Text({
            text: '清美空港科技农业基地',
            anchor: 'center', // 设置文本标记锚点
            angle: 0,
            offset: new AMap.Pixel(0, -50),
            style: {
                'text-align': 'center', background: '#03a90dee', border: 'none', color: '#fff', 'font-size': '16px', 'box-shadow': '0 0 5px 0 rgba(0, 0, 0, 0.5)', padding: '5px 10px'
            },
            position: [121.696364, 31.068521],
            map
        });

    for (let land of landList) {
        let p = addPolygon({
            map: map,
            path: land.path,
            strokeColor: land.color, //线颜色
            strokeOpacity: 0.9, //线透明度
            strokeWeight: 1, //线宽
            fillColor: land.color, //填充色
            fillOpacity: 0.5, //填充透明度
            zIndex: 1,

        })
        p.on('click', () => {
            clickHandler(map, land)
        })
        let newmarker = new AMap.Marker({
            position: land.center,
            anchor: 'bottom-center',
            map: map
        });
        newmarker.on('click', () => {
            clickHandler(map, land)
        })
        let text = new AMap.Text({
            text: land.name,
            anchor: 'center', // 设置文本标记锚点
            angle: 0,
            offset: new AMap.Pixel(0, -50),
            style: {
                'text-align': 'center', background: land.color, border: 'none', color: '#fff', 'font-size': '16px', 'box-shadow': '0 0 5px 0 rgba(0, 0, 0, 0.5)', padding: '5px 10px'
            },
            position: land.center,
            map
        });
    }



    map.setFitView(undefined, false, [160, 160, 160, 160]);
}


const clickHandler = (map: AMap.Map, land: any) => {


    var content = `
      <style>
      .land-text-item{color: #ffffff; margin: 0px 10px 10px 10px; width: 40%;}
      </style>
        <div style="background: #154c5c;border-radius: 5px;border: 1px solid #24ab9a;z-index: 99; font-size:16px">
          <div style="margin: 10px;display: flex; justify-content: space-between;">
            <div style="font-weight: bold;color: #ffffff;text-shadow: 0px 2px 5px #003f85;padding: 0 15px 0 0;">${land.name}</div>
            
          </div>
          <div style="display: flex; flex-flow:row wrap ; width:360px;">
          <div class="land-text-item">所属基地：种植基地</div>
          <div class="land-text-item">地块面积：12亩</div>
          <div class="land-text-item">当前作物：太子参</div>
          </div>
          <div style="font-weight: bold;color: #ffffff;text-shadow: 0px 2px 5px #003f85;padding: 0 15px 10px 15px;">适宜性</div>
          <div style="display: flex; flex-flow:row wrap ; width:360px;">
          <div class="land-text-item">土壤：适宜</div>
          <div class="land-text-item">气候：适宜</div>
          <div class="land-text-item">病虫害：适宜</div>
          <div class="land-text-item">极端天气：无</div>
            </div>
          </div>
      `;

    var infoWindow = new AMap.InfoWindow({
        anchor: "bottom-center",
        isCustom: true,
        content: content,
    });
    infoWindow.open(map, [land.path[0][0], land.path[0][1]]);
}

const addPolygon = (opt: PolygonOpt): AMap.Polygon => {
    let polygon = new AMap.Polygon();
    polygon.setOptions({
        path: opt.path, //设置多边形边界路径
        strokeColor: opt.strokeColor, //线颜色
        strokeOpacity: opt.strokeOpacity, //线透明度
        strokeWeight: opt.strokeWeight, //线宽
        fillColor: opt.fillColor, //填充色
        fillOpacity: opt.fillOpacity, //填充透明度
        zIndex: opt.zIndex,
        extData: opt.extData
    })
    opt.map.add(polygon)

    polygon.on('click', (e: AMap.Event) => {
        console.log(e.lnglat)
    })

    return polygon
}
</script>
<style scoped>
.base-home {
    display: flex;
    justify-content: space-between;
    padding: 7.8vh 2vw 0 2vw;

    height: 100vh;
    box-sizing: border-box;
}

.container-map {

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

}

.left {
    width: 23.6vw;
    position: relative;
    z-index: 6;
}

.right {
    width: 23.6vw;
    position: relative;
    z-index: 6;
}

.mask {
    pointer-events: none;
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
}

.land-list {
    position: absolute;
    z-index: 10;
    bottom: 2vh;
    right: 2vh;
}

.land-item {
    display: flex;
    align-items: center;
    padding: 1vh;
    background: #368931cc;
    margin: 0.5vh;
    width: 10vw;
}

.land-c {
    height: 2vh;
    width: 2vh;
    background: red;
    transform: rotateZ(45deg);
}

.land-name {
    font-size: 1.5vh;
    color: #fff;
    padding: 0 0 0 1vw;
}
</style>